<template>

  <div class="mixin-components-container">

    <el-card class="box-card">
      <el-row>
        <div style="margin-bottom:50px;">
          <el-col :xs="8" :sm="6" :md="4" :lg="4" class="text-center">
            <el-select v-model="listQuery.productypid" placeholder="想了解产品" :remote-method="getAllProductType" filterable default-first-option remote>
              <el-option
                v-for="item in ptlist"
                :key="item.id"
                :label="item.tname"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="4" class="text-center">
            <el-select v-model="listQuery.cbscale" placeholder="公司规模" filterable default-first-option>
              <el-option
                v-for="item in cbscalelist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="8" :xs="8" :sm="6" :md="4" :lg="8" :offset="8" class="text-center">
            <el-row>
              <el-col :span="16">
                <el-input
                  v-model="listQuery.title"
                  placeholder="请输入测评标题或手机号"
                  name="title"
                  type="text"
                  tabindex="1"
                  autocomplete="off"
                />
              </el-col>
              <el-col :span="2" :xs="8" :sm="6" :md="4" :lg="2">
                <el-button class-name="search-icon" icon-class="search" @click="handleSearch">
                  <svg-icon class-name="search-icon" icon-class="search" />
                </el-button>
              </el-col>

            </el-row>
          </el-col>
        </div>

      </el-row>
    </el-card>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="No" prop="id" align="center" width="50">
        <template slot-scope="{row}">
          <span>{{ row.no }}</span>
        </template>
      </el-table-column>
      <el-table-column label="企业名称" prop="cbname" align="center" width="160">
        <template slot-scope="{row}">
          <span>{{ row.cbname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公司规模" prop="cbscale" align="center" width="120">
        <template slot-scope="{row}">
          <span>{{ row.cbscale }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="cname" align="center" width="120">
        <template slot-scope="{row}">
          <span>{{ row.cname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话" prop="cnacphoneme" align="center" width="180">
        <template slot-scope="{row}">
          <span>{{ row.cphone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" prop="cemail" align="center" width="180">
        <template slot-scope="{row}">
          <span>{{ row.cemail }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公司职务" prop="job" align="center" width="120">
        <template slot-scope="{row}">
          <span>{{ row.job }}</span>
        </template>
      </el-table-column>
      <el-table-column label="想了解产品" prop="tname" align="center" width="180">
        <template slot-scope="{row}">
          <span>{{ row.tname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="comm" align="center" min-width="100" width="180" class="ellipsis">
        <template slot-scope="{row}">
          <span>{{ row.comm }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="handleSearch" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { getAllptlist, fetchList } from '@/api/consult'
export default {
  name: 'Consult',
  components: {
    Pagination
  },
  directives: {
  },
  data() {
    return {
      btnloading: false,
      listLoading: false,
      list: [],
      tableKey: 0,
      listQuery: {
        page: 1,
        limit: 10,
        productypid: '',
        condition: '',
        cbscale: '',
        title: ''
      },
      total: 0,
      cbscalelist: [
        { id: '-1', name: '公司规模' },
        { id: '20人以下', name: '20人以下' },
        { id: '50-200人', name: '50-200人' },
        { id: '200-500人', name: '200-500人' },
        { id: '500-1000人', name: '500-1000人' },
        { id: '1000人以上' , name: '1000人以上' }
      ],
      ptlist: []
    }
  },
  created() {
    this.getAllProductType()
  },
  methods: {
    getAllProductType() {
      debugger
      getAllptlist().then(response => {
        if (!response.data) return
        this.ptlist = Object.assign(response.data)
        this.ptlist.unshift({ id: '-1', tname: '全部' })
      })
    },
    handleSearch() {
      let _this = this
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.list.map((item, n) => {
          item.no = (_this.listQuery.page - 1) * _this.listQuery.limit + n + 1
          return item
        })
        _this.total = response.data.total
        if (_this.total != 0) {
          _this.disabled = false
        }
      })
      // Just to simulate the time of the request
      setTimeout(() => {
        this.listLoading = false
      }, 1.5 * 1000)
    }
  }
}

</script>

<style>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.component-item{
  min-height: 100px;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: blue;
}

</style>
